<template>
  <div class="main">
    <vxe-grid class="grid" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { ElMessage } from "element-plus";
const gridOptions = reactive({
  border: true,
  editConfig: {
    trigger: "click",
    mode: "row",
    beforeEditMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 1) {
        ElMessage.error("Row 2 is not editable");
        return false;
      }
      return true;
    },
  },
  columns: [
    { type: "seq", width: 70 },
    { field: "name", title: "Name", editRender: { name: "input" } },
    { field: "sex", title: "Sex", editRender: { name: "input" } },
    { field: "age", title: "Age", editRender: { name: "input" } },
    { field: "address", title: "Address" },
  ],
  data: [
    {
      id: 10001,
      name: "Test1",
      role: "Develop",
      sex: "Man",
      age: 28,
      address: "text",
    },
    {
      id: 10002,
      name: "Test2",
      role: "Test",
      sex: "Women",
      age: 22,
      address: "Guangzhou",
    },
  ],
});
</script>

<style lang="scss" scoped></style>
